<?php
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Chart</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="REEFTvisual - Stoptime">
<meta name="author" content="REEFT A/S">
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.3.0/dist/chart.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.3.0/dist/chart.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.1.0"></script>
<!-- Bootstrap / jQuery -->
<link href="css/bootstrap4.3.1/css/bootstrap.custom.min.css" rel="stylesheet">
<link href="css/bootstrap4.3.1/css/themes/bootstrap.custom.min.css" rel="stylesheet">
<link href="css/bootstrap4.3.1/css/normalize.css" rel="stylesheet" type="text/css">
<link href="css/sticky-footer.css" rel="stylesheet" type="text/css">
<!-- Custom styles for this template -->
<link href="css/custom.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="css/fontawesome6.5.1/js/all.min.js"></script>
<script src="css/fontawesome6.5.1/js/sharp-light.min.js"></script>
<script src="css/fontawesome6.5.1/js/sharp-regular.min.js"></script>
<script src="css/fontawesome6.5.1/js/sharp-solid.min.js"></script>
<script src="css/fontawesome6.5.1/js/sharp-thin.min.js"></script>
<link href="css/bootstrap_animation/css/animate4/animate.css" rel="stylesheet" type="text/css">
<!--<link href="javascript/chosen/chosen.css" rel="stylesheet" type="text/css">-->
<link href="javascript/jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css"/>
<script src="javascript/jquery.js"></script>
<script src="css/bootstrap4.3.1/js/popper.js"></script>
<script src="css/bootstrap4.3.1/js/bootstrap.min.js"></script>
<script src="javascript/jquery-ui/jquery-ui.min.js"></script>
<script src="javascript/jquery.ui.touch-punch.min.js"></script>
<style>
zcanvas {
max-width: 1800px;
margin: 0 auto;
}
</style>
<script>
//=============================================================================
// jQuery - Ready
//=============================================================================
$(document).ready(function() {
// Your JSON data
const data = {
"detail": [
{"counter": 1, "HUB_WEBNAM": "ALFA_ORC_IPICK_TransferNewPickingProcess", "HUB_COUNT": "629"},
{"counter": 2, "HUB_WEBNAM": "ALFA_ORC_STOPTIME_GetWCList", "HUB_COUNT": "210"},
{"counter": 3, "HUB_WEBNAM": "ALFA_ORC_STOPTIME_GetWOList", "HUB_COUNT": "920"},
{"counter": 4, "HUB_WEBNAM": "ALFA_ORC_STOPTIME_PhaseProgress", "HUB_COUNT": "4"},
{"counter": 5, "HUB_WEBNAM": "ALFA_ORC_STOPTIME_PrintWo", "HUB_COUNT": "30"},
{"counter": 6, "HUB_WEBNAM": "ALFA_ORC_STOPTIME_WorkOrderPhaseProgress", "HUB_COUNT": "1"},
{"counter": 7, "HUB_WEBNAM": "ALFA_ORC_TAKT_MesPhaseProgress", "HUB_COUNT": "673"},
{"counter": 8, "HUB_WEBNAM": "ALFA_ORCH_STOPTIME_WorkOrderPhaseProgress", "HUB_COUNT": "91"}
// {"counter": 9, "HUB_WEBNAM": "GETTAKTINF", "HUB_COUNT": "1675"},
// {"counter": 10, "HUB_WEBNAM": "HUB_CONFIG", "HUB_COUNT": "2122"},
// {"counter": 11, "HUB_WEBNAM": "HUB_IMPLOG", "HUB_COUNT": "2760"},
// {"counter": 12, "HUB_WEBNAM": "HUB_PRTWRK", "HUB_COUNT": "26"},
// {"counter": 13, "HUB_WEBNAM": "HUB_IMPFIL", "HUB_COUNT": "1135"}
]
};
// Sort data by HUB_COUNT in descending order
const sortedData = data.detail.sort((a, b) => b.HUB_COUNT - a.HUB_COUNT);
const labels = sortedData.map(item => item.HUB_WEBNAM);
const values = sortedData.map(item => item.HUB_COUNT);
// Generate random colors for each bar
const colors = values.map(() => `hsl(${Math.floor(Math.random() * 360)}, 70%, 60%)`);
// Chart.js configuration for a vertical bar chart with datalabels
const config = {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: 'HUB_COUNT',
data: values,
backgroundColor: colors
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
},
// plugins: {
// legend: { display: false },
// datalabels: {
// anchor: 'end', // Position label above the bar
// align: 'end',
// formatter: (value, context) => context.chart.data.labels[context.dataIndex], // Display HUB_WEBNAM
// font: {
// size: 10,
// weight: 'bold'
// },
// color: '#333' // Text color
// }
// }
},
plugins: [ChartDataLabels]
};
// Render the chart
new Chart(document.getElementById('myChart'), config);
});
</script>
</head>
<body>
<canvas style="max-width:1800px;max-height:800px" id="myChart"></canvas>
</body>
</html>